<template>
  <div class="Official">
    <p>官方榜</p>
    <div v-for="(item, i) in rankOfficial" :key="item.id">
      <img :src="item.coverImgUrl" alt="" />
      <div class="sing" v-for="(sing, j) in songDetail[i]" :key="sing.id">
        <div class="song">
          <p :style="j < 3 ? 'color:red;' : ''">{{ `0${j + 1}` }}</p>
          <p>{{ sing.name }}</p>
        </div>
        <p>{{ sing.artist }}</p>
      </div>
    </div>
  </div>
  <div class="global">
    <p>全球榜</p>
    <gridList :gridListInfo="globalList" />
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, computed } from "vue";
import { useSendReq } from "@/store/sendReq/index";
import { useThemeColor } from "@/store/themeColor";
import gridList from "@/components/gridList.vue";
const SendReq = useSendReq();
const themeColor = useThemeColor();
const rankOfficial = reactive<rankList[]>([]);
const songDetail = reactive<any[]>([]);
const globalList = reactive<any[]>([]);

SendReq.getTopList().then(async (res) => {
  globalList.push(...res.list.slice(4));
  let num = 0;
  let official = res.list.slice(0, 5);
  official.slice(0, 5).forEach(async (item, i) => {
    i == 4 && (item.name = item.name.slice(5));
    songDetail[i] = [];
    let res = await SendReq.getMusicDetail(item.id);
    res.playlist.trackIds.slice(0, 8).forEach(async (a: any) => {
      await SendReq.getSongsDetail(a.id).then((res) => {
        let a = {
          id: res.songs[0].id,
          name: res.songs[0].name,
          album: res.songs[0].al.name,
          artist: res.songs[0].ar[0].name,
          pic: res.songs[0].al.picUrl,
        };
        songDetail[num].push(a);
        songDetail[num].length == 8 && num++;
      });
    });
  });
  await rankOfficial.push(...official);
});
// 样式
const themeSle = computed(() => {
  let a: Record<string, string> = {
    blackP: "#1a1c20",
    whiteP: "#f9f9f9",
    blackHoverSing: "#2c2e32",
    whiteHoverSing: "#ebeced",
    blackHoverP: "#fff",
    whiteHoverP: "#575757",
  };

  let themeP = a[`${themeColor.theme}P`];
  let themeHoverSing = a[`${themeColor.theme}HoverSing`];
  let themeHoverP = a[`${themeColor.theme}HoverP`];
  return { themeP, themeHoverSing, themeHoverP };
});
</script>

<style scoped lang="less">
.Official {
  display: flex;
  flex-wrap: wrap;
  > P {
    flex: 100%;
    font-size: 22px;
    font-weight: 600;
    margin: 20px 0;
  }
  > div {
    margin-right: 2%;
    width: 435px;
    margin-bottom: 95px;
    img {
      width: 100%;
      height: 130px;
      object-fit: cover;
    }
    .sing:nth-child(odd) {
      background-color: v-bind("themeSle.themeP");
    }
    .sing:hover {
      background-color: v-bind("themeSle.themeHoverSing");
      cursor: pointer;
      color: v-bind("themeSle.themeHoverP");
    }
    > div {
      display: flex;
      justify-content: space-evenly;
      padding: 0 5px;
      height: 30px;
      line-height: 30px;
      color: #575757;

      .song {
        display: flex;
        p:nth-child(2) {
          margin-left: 10px;
        }
      }
    }
  }
}
.global {
  > P {
    font-size: 22px;
    font-weight: 600;
  }
}
</style>
